<template>

	<!-- 引入container布局 -->
	<el-container class="home-container">
		<!-- 头部 -->
		<el-header>
			<div>
				<img src="../assets/111.png" alt />
				<span>风险管理系统</span>
			</div>

			<el-button type="info" @click="logout">安全退出</el-button>
		</el-header>
		<!-- 主体 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="iscollapse?'64px':'200px'">
				<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff":router="true" :default-active="activePath"
				unique-opened :collapse="iscollapse" :collapse-transition="false">
					
			<!-- 伸缩按钮 -->
			<div class="toggle-button" @click="toggleCollapase">|||</div> <!-- @click="toggleCollapase" -->
			<!-- 一级菜单 -->
			<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
			
				<template slot="title">
					<i class="el-icon-location"></i> <span>{{item.title}}</span>
				</template>
			
				<!-- 二级菜单 -->
				<el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savNavState(it.path)">
					<template solt="title">
						<i class="el-icon-location"></i> <span>{{it.title}}</span>
					</template>
				</el-menu-item>
			
			</el-submenu>
			</el-menu>
			</el-aside>
			<!-- 主体内容 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
	export default {
		 data(){
			return{
				menuList: [], //菜单列表
				activePath: '/welcome', //默认路径
				iscollapse: false, //伸缩状态 默认不缩
			}
		},
		created() {
			this.getMenuList();
			this.activePath = window.sessionStorage.getItem('activePath');
		},
		methods: {
			//安全退出
			logout() {
				window.sessionStorage.clear();//清除session
				this.$router.push("/login"); //回到首页
			},
			//获取导航菜单方法
			async getMenuList() {
				const {
					data: ref_json
				} = await this.$http.get('menus');
				var res = JSON.stringify(ref_json); //json转换为js对象
				var resF = JSON.parse(res);
				if (resF.flag != 200) return this.$message.error("获取列表失败！");
				this.menuList = resF.menus; //菜单列表
			},
			//伸缩按钮
			toggleCollapase() {
				this.iscollapse = !this.iscollapse;
			},
			//保存路径
			savNavState(activePath) {
				window.sessionStorage.setItem('activePath', activePath) //存入session
				this.activePath = activePath;
			},
			
		}
	};
</script>

<style lang='less' scoped>
	//布局器样式
	.home-container {
		height: 100%;
	}

	//头样式
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		padding-left: 0%; // 左边界
		align-items: center; // 水平
		color: #fff;
		font-size: 20px;

		>div {
			//左侧div加布局
			display: flex;
			align-items: center;

			span {
				margin-left: 15px;
			}
		}
	}

	//侧边栏样式
	.el-aside {
		background-color: #333744;
		.el-menu{
			border-right: none;
		}
	}

	//主题样式
	.el-main {
		background-color: #eaedf1;
	}

	//logo样式
	img {
		width: 55px;
		height: 55px;
	}
	/* |||按钮 */
	.toggle-button {
		background-color: #282c35;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
